<template>
  <div>
    <a-form style="height: 100%;">
      <a-row>
        <a-col :span="24">
          <a-form-item :label-col="labelCol1" :wrapper-col="wrapperCol1" :label="i18n('form.type','类型')">
            <a-radio-group v-model="type">
              <a-radio value="self">{{i18n('form.custom','自定义')}}</a-radio>
              <a-radio value="form">{{i18n('form.form','表单')}}</a-radio>
              <a-radio value="list">{{i18n('List','列表')}}</a-radio>
            </a-radio-group>
          </a-form-item>
        </a-col>
      </a-row>
        <a-row v-show="type=='self'">
          <a-col :span="24">
            <a-form-item :label-col="labelCol1" :wrapper-col="wrapperCol1" :label="i18n('form.pageHtml','页面HTML')">
                <div>{{i18n('form.pageHtmlDesc1','展开列的html,支持vue的模板语法,可以使用')}}<b>{{</b><b>row.{{i18n('form.pageHtmlDesc2','字段')}}</b><b>}}</b>，{{i18n('form.pageHtmlDesc3','上下文数据为')}} :<b>row</b>
              <rx-monaco-editor
                v-model="listHtml"
                style="height: 300px;"
                language="html"
              >
              </rx-monaco-editor>
              </div>

            </a-form-item>
          </a-col>
        </a-row>
        <a-row v-show="type=='form'">
          <a-col :span="12">
            <a-form-item :label-col="labelCol" :wrapper-col="wrapperCol" :label="i18n('form.selFormAlias','选择表单方案')">
              <rx-input-button style="width: 100%;" @click="selectSolution" v-model="formAlias"></rx-input-button>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item :label-col="labelCol" :wrapper-col="wrapperCol" :label="i18n('form.isUsePk','是否使用主键')">
              <a-radio-group v-model="isPk">
                <a-radio value="YES">{{i18n('yes','是')}}</a-radio>
                <a-radio value="NO">{{i18n('no','否')}}</a-radio>
              </a-radio-group>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row v-if="type=='form' && isPk=='YES'">
          <a-col :span="24">
            <a-form-item :label-col="labelCol1" :wrapper-col="wrapperCol1" :label="i18n('form.formPkMapping','主键参数映射')">
              <a-table
                :dataSource="formPkMapping"
                :pagination="false"
                :rowSelection="receiveRowSelection"
                rowKey="idx_"
                :bordered="true"
                style="height:100px;"
              >
                <a-table-column :title="i18n('form.paramName','参数名称')" dataIndex="name"  >
                  <template slot-scope="text, record">
                    {{text}}
                  </template>
                </a-table-column>
                <a-table-column :title="i18n('form.valueSource','值来源')" dataIndex="valueSource"  >
                  <template slot-scope="text, record">
                    <a-select v-model="record.valueSource"
                              :options="valueSourceDef"
                              :allowClear="true"
                              :getPopupContainer="(p)=>p.parentNode"
                    >
                    </a-select>
                  </template>
                </a-table-column>
                <a-table-column :title="i18n('form.paramValue','参数值')" dataIndex="valueDef"  >
                  <template slot-scope="text, record">
                    <a-select v-model="record.valueDef"
                              :options="fieldData"
                              :allowClear="true"
                              :getPopupContainer="(p)=>p.parentNode"
                              v-if="record.valueSource=='param'"
                    >
                    </a-select>
                    <a-input v-model="record.valueDef" v-if="record.valueSource=='fixedVar'" ></a-input>
                    <a-input-group v-if="record.valueSource=='script'" compact>
                      <a-input v-model="record.valueDef" style="width:80%;"/>
                      <a-button @click="openScriptQuery(record)">...</a-button>
                    </a-input-group>
                    <a-select v-if="record.valueSource=='constantVar'" v-model="record.valueDef" :options="constantField" allowClear :getPopupContainer="(p)=>p.parentNode"></a-select>
                  </template>
                </a-table-column>
              </a-table>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row v-if="type=='form' && isPk=='NO'">
          <a-col :span="24">
            <a-form-item :label-col="labelCol1" :wrapper-col="wrapperCol1" :label="i18n('form.noKeyMapping','无主键参数映射')">
              <a-table
                :dataSource="formMapping"
                :pagination="false"
                :rowSelection="receiveRowSelection"
                rowKey="idx_"
                :bordered="true"
              >
                <a-table-column :title="i18n('form.paramName','参数名称')" dataIndex="name"  >
                  <template slot-scope="text, record">
                    {{text}}
                  </template>
                </a-table-column>
                <a-table-column :title="i18n('form.valueSource','值来源')" dataIndex="valueSource"  >
                  <template slot-scope="text, record">
                    <a-select v-model="record.valueSource"
                              :options="valueSourceDef"
                              :allowClear="true"
                              :getPopupContainer="(p)=>p.parentNode"
                    >
                    </a-select>
                  </template>
                </a-table-column>
                <a-table-column :title="i18n('form.paramValue','参数值')" dataIndex="valueDef"  >
                  <template slot-scope="text, record">
                    <a-select v-model="record.valueDef"
                              :options="fieldData"
                              :allowClear="true"
                              :getPopupContainer="(p)=>p.parentNode"
                              v-if="record.valueSource=='param'"
                    >
                    </a-select>
                    <a-input v-model="record.valueDef" v-if="record.valueSource=='fixedVar'" ></a-input>
                    <a-input-group v-if="record.valueSource=='script'" compact>
                      <a-input v-model="record.valueDef" style="width:80%;"/>
                      <a-button @click="openScriptQuery(record)">...</a-button>
                    </a-input-group>
                    <a-select v-if="record.valueSource=='constantVar'" v-model="record.valueDef" :options="constantField" allowClear :getPopupContainer="(p)=>p.parentNode"></a-select>
                  </template>
                </a-table-column>
              </a-table>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row v-show="type=='list'">
          <a-col :span="24">
            <a-form-item :label-col="labelCol1" :wrapper-col="wrapperCol1" :label="i18n('form.selectList','选择数据列表')">
              <rx-input-button style="width: 100%;" @click="selectList" v-model="listAlias"></rx-input-button>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row v-show="type=='list'">
          <a-col :span="24">
            <a-form-item :label-col="labelCol1" :wrapper-col="wrapperCol1" :label="i18n('form.selParamMapping','查询参数映射')">
              <a-table
                :dataSource="listMapping"
                :pagination="false"
                :rowSelection="receiveRowSelection"
                rowKey="idx_"
                :bordered="true"
              >
                <a-table-column :title="i18n('form.paramName','参数名称')" dataIndex="name"  >
                  <template slot-scope="text, record">
                    {{text}}
                  </template>
                </a-table-column>
                <a-table-column :title="i18n('form.valueSource','值来源')" dataIndex="valueSource"  >
                  <template slot-scope="text, record">
                    <a-select v-model="record.valueSource"
                              :options="valueSourceDef"
                              :allowClear="true"
                              :getPopupContainer="(p)=>p.parentNode"
                    >
                    </a-select>
                  </template>
                </a-table-column>
                <a-table-column :title="i18n('form.paramValue','参数值')" dataIndex="valueDef"  >
                  <template slot-scope="text, record">
                    <a-select v-model="record.valueDef"
                              :options="fieldData"
                              :allowClear="true"
                              :getPopupContainer="(p)=>p.parentNode"
                              v-if="record.valueSource=='param'"
                    >
                    </a-select>
                    <a-input v-model="record.valueDef" v-if="record.valueSource=='fixedVar'" ></a-input>
                    <a-input-group v-if="record.valueSource=='script'" compact>
                      <a-input v-model="record.valueDef" style="width:80%;"/>
                      <a-button @click="openScriptQuery(record)">...</a-button>
                    </a-input-group>
                    <a-select v-if="record.valueSource=='constantVar'" v-model="record.valueDef" :options="constantField" allowClear :getPopupContainer="(p)=>p.parentNode"></a-select>
                  </template>
                </a-table-column>
              </a-table>
            </a-form-item>
          </a-col>
        </a-row>
    </a-form>
  </div>
</template>

<script>
  import {RxMonacoEditor,Dialog,Util} from "@lowcode/jpaas-common-lib";
  import FormCustomQueryApi from '@/api/form/core/formCustomQuery';
  import DialogBox from "@/assets/js/DialogBox";
  export default {
    name: "FormBoListExpandRow",
    components: {
      RxMonacoEditor
    },
    computed:{
      receiveRowSelection(){
        return {
          selectedRowKeys: this.selectedRowKeys,
          onChange:this.onSelectChange
        }
      }
    },
    data() {
      return {
        labelCol: { span:6 },
        wrapperCol: { span:18 },
        labelCol1: { span:3 },
        wrapperCol1: { span:19 },
        fieldData:[],
        type:'self',
        //self参数
        listHtml:'',
        //form参数
        formAlias:'',
        isPk:'YES',
        formPkMapping:[{idx_:Util.randomId(), name:'pk',valueSource:"param",valueDef:""}],
        formMapping:[],
        selectedRowKeys:[],
        valueSourceDef:[{value:"param",label:this.i18n('paraPass','参数传入')},
          {value:"fixedVar",label:this.i18n('fixValue','固定值')},
          {value:"script",label:this.i18n('form.script','脚本')},
          {value:"constantVar",label:this.i18n('constant','常量')}],
        constantField:[],
        //list参数
        listAlias:'',
        listMapping:[]
      }
    },
    created() {
      this.loadConstants();
    },
    methods: {
        i18n(name, text, key) {
            return this.$ti18(name, text, "formBoListDialog", key);
        },
      setData(expandRowJson,fieldDatas){
        this.expandRowJson=expandRowJson;
        this.fieldData=fieldDatas;
        //默认类型：自定义
        this.type=this.expandRowJson.type || 'self';
        this.initData(expandRowJson);
      },
      initData(expandRowJson){
        if(this.type=='self'){
          this.listHtml=expandRowJson.listHtml;
        }else if(this.type=='form'){
          this.formAlias=JSON.stringify({text:expandRowJson.formName,value:expandRowJson.formAlias});
          this.isPk=expandRowJson.isPk;
          this.formMapping=expandRowJson.formMapping;
          this.formPkMapping=expandRowJson.formPkMapping;
        }else if(this.type=='list'){
          this.listAlias=JSON.stringify({text:expandRowJson.listName,value:expandRowJson.listAlias});
          this.listMapping=expandRowJson.listMapping;
        }
      },
      getData(){
        var result={success:true,message:"",data:{type:this.type}};
        if(this.type=='self'){
          result.data.listHtml=this.listHtml;
        }else if(this.type=='form'){
          var formAlias=this.formAlias?JSON.parse(this.formAlias):{};
          result.data.formAlias=formAlias.value;
          if(!formAlias.value){
            result.success=false;
            result.message=this.i18n('selFormSchemeTips','请选择表单方案！');
          }
          result.data.formName=formAlias.text;
          result.data.isPk=this.isPk;
          result.data.formMapping=this.formMapping;
          result.data.formPkMapping=this.formPkMapping;
        }else if(this.type=='list'){
          var listAlias=this.listAlias?JSON.parse(this.listAlias):{};
          result.data.listAlias=listAlias.value;
          if(!listAlias.value){
            result.success=false;
            result.message=this.i18n('selDatalistTips','请选择数据列表！');
          }
          result.data.listName=listAlias.text;
          result.data.listMapping=this.listMapping;
        }
        return result;
      },
      selectSolution(vm){
        var self=this;
        var config = {curVm: this, widthHeight: ['800px', '600px'],data:{multiSelect:false}};
        DialogBox.openSoution(config, function (data) {
          vm.setVal(data.alias,data.name);
          if(!data.noPkSetting){
            return;
          }
          var noPkSetting=JSON.parse(data.noPkSetting);
          self.formMapping=noPkSetting.filter(item=>{
              return item.valueSource=='param';
          }).map(item=>{
            return {idx_:Util.randomId(), name:item.name,valueSource:item.valueSource,valueDef:item.valueDef}
          });
        })
      },
      selectList(vm) {
        var conf = {
          curVm: this,
          data: {
            single: true,
            isDialog: 'NO',
          },
          widthHeight: ['800px', '600px']
        }
        var self_ = this
        Dialog.openFormBoListDialog(conf, function (self, data) {
          vm.setVal(data[0].key, data[0].name);
          if (data[0].searchJson) {
            var paramsJson = JSON.parse(data[0].searchJson).filter((item) => item.type === 'income');
            self.listMapping=paramsJson.map(item=>{
              var tabPre = item.tablePre ? item.tablePre + '.' : ''
              var type = self.getType(item.dataType)
              return {idx_:Util.randomId(), name:'Q_' + tabPre + item.fieldName + '_' + type + '_' + item.fieldOp,valueSource:'param',valueDef:''}
            });
          }
        })
      },
      getType(type) {
        var typeObj = { string: 'S', number: 'I', date: 'D' }
        if (typeObj[type]) {
          return typeObj[type]
        }
        return 'S'
      },
      onSelectChange(selectedRowKeys) {
        this.selectedRowKeys = selectedRowKeys;
      },
      openScriptQuery(record) {
        Dialog.openScripttextDialog({
          curVm: this, widthHeight: ['800px', '600px'], data: {script: record.valueDef}
        }, function (self, data) {
          record.valueDef = data;
        })
      },
      loadConstants() {
        FormCustomQueryApi.getConstants().then((data) => {
          this.constantField = this.constantField.concat(
            data.map((item) => {
              return { label: item.val, value: item.key }
            })
          )
        })
      },
    }
  }
</script>

<style scoped>

</style>